<template>
  <div class="index">
    <main-layout>
      <div class="content">
<!--        <div class="title"></div>-->
        <div class="content-box">
            <el-carousel class="content-carousel" trigger="click" height="200px">
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <el-image
                    style="width: 100%; height: 200px"
                    :src="item.imgUrl"
                    fit="cover"></el-image>
              </el-carousel-item>
            </el-carousel>
            <article-card v-for="item in list" :key="item.id" :list="item" ></article-card>
            <el-pagination
              v-show="total>0"
              background
              :current-page.sync="query.page"
              :page-size.sync="query.pageSize"
              :total="total"
              @pagination="getList"
              hide-on-single-page
          >
          </el-pagination>
        </div>
      </div>
    </main-layout>
  </div>
</template>

<script>
import {getArticleList} from "@/api/index/index"
import {format} from "@/utils/common"
export default {
  name: "index",
  data(){
    return{
      imgList:[
        {imgUrl:require("/public/carousel/19b6e2dd801f5.png"),id:1},
        {imgUrl: require("/public/carousel/a130f3da102d1.jpg"),id:2}
      ],
      query:{
        page:1,
        pageSize:10,
      },
      list:'',
      total:0,//文章总数
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    /**文章列表查询*/
      getList(){
      this.$openLoading()
        getArticleList(this.query).then(res=>{
          this.$openLoading().close()
          if(res.data.meta.code===200){
              let  data=res.data.data.result
              this.total=res.data.data.count
              this.list=data

          }
        })
      },




  },
}
</script>

<style scoped lang="scss">
.index{
  width: 100%;
  height: calc(100vh - 50px);

  .content{
    >.title{
      height: 100px;
      background-color: #42b983;
    }
    >.content-box{
      padding: 20px;
      >.content-carousel{
        margin-bottom: 20px;
        border-radius: 6px;
      }
    }
  }
}

</style>
